[Vue] (ChatGPT가 말해주는) Vue2와 Vue3의 차이

#[Vue] (ChatGPT가 말해주는) Vue2와 Vue3의 차이| 来源: 网络整理| 查看: 265

ChatGPT를 옆에 끼고 Vue + Spring MVC 프로젝트를 진행하는 도중

VSCode가 기본으로 제공하는 스니펫은 Vue3용이 아니라는 걸 알게 됐다.

물론 호환이 안되는 것은 아니었지만 여러모로 Vue3에서 개선된 기능들을 활용하기 위해서

그 동안 그냥 이 스니펫 위에 작성했던 코드를 vue3용으로 바꾸기로 마음먹었다.

왜냐 나한테는 든든한 조력자(주력자)가 있었기 때문이다.

한번 긁어서 바꿔달라고 해보았다.

... import ... export default { components: { ... }, name : "CalendarView", data() { return { ... }, } }, methods : { showModal(){ this.modalOpen = true; } } } ...

AI가 바꿔준 코드는 이렇다.

... import { ref } from 'vue'; export default { components: { FullCalendar }, name : "CalendarView", setup() { const clickedDate = ref(null); // 변수 const modalOpen = ref(false); ... const showModal = () => { //메소드 modalOpen.value = true; }; ... return { clickedDate, modalOpen, ... showModal, hideModal } }, } ... 차이점 1 : import { ref } from 'vue';

첫번째 차이점은 vue에서 ref를 import해온다.

그 이유를 또 물어봤더니 대답이 vue2에서는 data(){} 함수 안에서 반응형 프로퍼티가

되었지만,

vue3에서는 더이상 data(){}를 통해 반응형 프로퍼티를 만들지 않는다고 한다.그래서 vue3의 Composition API를 사용할 필요가 있다고 대답한다.

차이점 2 : setup() {}

안에 내용을 보면 변수 선언, 메소드 선언, return 이렇게 3가지로 구성된다.

(computed property도 포함)

return 에는 블록 안에 선언된 변수명 메소드명들을 모두 적어놓았다.

import {{ ref }} from 'vue' 를 했다면 이 안에 있는 애들은 반응형으로 관리된다.

차이점 3 : const a = ref("b")

setup 블록 안에서 선언된 변수들에게 ref("~~") 식으로 값을 입력한다.

보통의 변수 초기화 작업과는 다르다.

결국

반응형 변수, 함수를 관리하는 방식이 달라졌다.

예전 같았으면 그냥 vue2에서 vue3로 바꿀 엄두 안 났을 듯..

참고 문서

Vue.js Documentation on setup function: https://v3.vuejs.org/guide/composition-api-setup.html Vue.js Documentation on Reactivity: https://v3.vuejs.org/guide/reactivity.html Vue.js Documentation on Refs: https://v3.vuejs.org/guide/migration/refs-api.html Vue.js Documentation on Computed Properties: https://v3.vuejs.org/guide/computed.html Vue.js Documentation on Reactive Objects: https://v3.vuejs.org/guide/reactivity-fundamentals.html#reactive-objects

【本文地址】

公司简介

联系我们